<template>
  <view class="video_detail_container">
    <navbar :title="content?content.title:' '"></navbar>
    <video id="myVideo"
           v-if="content"
           :show-fullscreen-btn="false"
           @timeupdate="onTimeupdate"
           :autoplay="true"
           :style="{width: screenWidth+'px', height: screenHeight+'px'}"
           :src="content.url">
    </video>
  </view>
</template>
<script>
import Navbar from "@/components/navbar.vue";
import {courseApi} from "@/api";
import {mapGetters, mapActions} from 'vuex'

export default {
  components: {Navbar},
  data() {
    return {
      content: null,
      course: null,
      screenHeight: 0,
      screenWidth: 0
    }
  },
  computed: {
    ...mapGetters(['systemInfo', 'topBar', 'isKemu1VIP', 'isKemu2VIP', 'isKemu3VIP', 'isKemu4VIP']),
    kemuVIP() {
      if (this.course) {
        if (this.course.kemu === 1) {
          return this.isKemu1VIP
        }
        if (this.course.kemu === 2) {
          return this.isKemu2VIP
        }
        if (this.course.kemu === 3) {
          return this.isKemu3VIP
        }
        if (this.course.kemu === 4) {
          return this.isKemu4VIP
        }
      }
    }
  },
  async onLoad({contentId}) {
    const res = await courseApi.content(contentId)
    this.content = res.data.data
    this.course = res.data.data.course
    this.screenHeight = this.systemInfo.screenHeight
    this.screenWidth = this.systemInfo.screenWidth
    if (this.topBar.style === 'custom') {
      this.screenHeight -= this.topBar.height
    }
  },
  onReady() {
    this.videoContext = uni.createVideoContext('myVideo')
  },
  methods: {
    onTimeupdate(e) {
      console.log('onTimeupdate', 'currentTime:' + e.detail.currentTime)
      if (!this.kemuVIP && this.content.free !== 1 && e.detail.currentTime > 30) {
        this.videoContext.stop()
        this.videoContext.seek(0)
        uni.showToast({
          title: '30秒试看结束！',
          icon: 'none'
        })
        // console.log(this.videoContext.stop)
      }
    },
  }
}
</script>

<style lang="scss">
page {
  height: 100%;
}

.video_detail_container {
  background-color: #000;
  height: 100%;
}
</style>
